<template>
  <div class="lc_wrap">
    <el-row class="abnormal swaqAbnormal">
      <el-col :span="leftWidth">
        <div class="box treeBox">
          <basic-container>
            <lcTree @ready="ready" :deviceType='systemInfo.treeType'></lcTree>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="rightWidth" class="table-wrapper">
        <overlay @changeTreeBox="changeTreeBox"></overlay>
        <basic-container>
          <el-form :inline="true" class="demo-form-inline" size="small">
            <el-form-item label="采样时间">
              <el-date-picker style="width: 150px;" v-model="query.startTime" type="date" size="small" placeholder="开始日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
              </el-date-picker>
              &nbsp;至&nbsp;
              <el-date-picker style="width: 150px;" v-model="query.endTime" type="date" size="small" placeholder="结束日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
              </el-date-picker>
              &nbsp;&nbsp;
            </el-form-item>

            <el-form-item label="样品编号">
              <el-input v-model="query.sampleNum" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item label="采样方式">
              <el-select size="small" v-model="query.samplingMethods" style="width: 150px;">
                <el-option v-for="(item, index) in sampWayOption" :key="index" :label="item.id" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select size="small" v-model="query.sampleStatus" style="width: 150px;">
                <el-option v-for="(item, index) in listStatusOption" :key="item" :label="item.id" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!--搜索按钮-->
            <el-form-item label="" style="margin-left: 10px;">
              <el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn()">搜 索</el-button>
              <el-button type="" size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
            </el-form-item>
          </el-form>

          <avue-crud ref="crud" v-model="form" :option="option" :table-loading="loading" :data="data" :page.sync="page" @refresh-change="refreshChange" @search-change="searchChange" @selection-change="selectionChangeSampleList" @current-change="currentChange" @size-change="sizeChange" @search-reset="searchReset">
            <template slot="menuLeft" slot-scope="scope">
              <el-button v-if="permission.psoa32_analysis_sample_collect" type="primary" size="small" plain icon="el-icon-tickets" :disabled="allId.length === 0" @click="collectOrCheck(0,allId)">批量收集</el-button>
              <el-button v-if="permission.psoa32_analysis_sample_discard" type="danger" size="small"  plain :disabled="allId.length === 0" icon="el-icon-delete-solid" @click="discard(allId)">批量弃样</el-button>
            </template>
            <template slot="menu" slot-scope="scope">
              <div v-if="scope.row.sampleStatus=== 1 && permission.psoa32_analysis_sample_collectdiscard ">
                <el-button icon="el-icon-tickets" type="text" size="small" @click="collectOrCheck(0,scope.row.id)">收集</el-button>
                <el-button type="text" size="small" icon="el-icon-delete-solid" @click="discard(scope.row.id)">弃样</el-button>
              </div>

              <div v-else-if="scope.row.sampleStatus === 3 ">
                <el-button type="text" size="small" disabled="true">已弃样</el-button>
              </div>

              <div v-else-if="scope.row.sampleStatus === 2">
                <el-button type="text" size="small" @click="collectOrCheck(1,scope.row)" icon="el-icon-search">查看</el-button>
              </div>
            </template>
            <template slot="sampleStatusName" slot-scope="scope">
              <el-tag size="small" type="warning" v-if="scope.row.sampleStatus===1">待收集</el-tag>
              <el-tag size="small" type="success" v-else-if="scope.row.sampleStatus===2">已收集</el-tag>
              <el-tag size="small" type="danger" v-else>已弃样</el-tag>
            </template>
          </avue-crud>

          <!--          //收集报告弹窗-->
          <el-dialog
           v-if="collectReportDialog"  :modal-append-to-body="false" :visible.sync="collectReportDialog" center class=" Dialog_title" ref="" >
            <template  slot="title">
              <div style="font-size: 18px;text-align: left" >收集报告</div>
            </template>
            <el-divider></el-divider>

            <avue-form  :option="reportOption" @reset-change="emptytChange" @submit="colReportFun" v-model="reportQuery">
              <template slot="menuForm" slot-scope="scope" v-if="!colReportChange">
                <el-button @click="collectReportDialog = false" icon="el-icon-close" >取消</el-button>
              </template>
              <template slot="crud">
                <avue-crud :data="reportData" :option="optionCol" :table-loading="loading" @current-change="currentChange" @refresh-change="refreshChange" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @size-change="sizeChange" @row-style = "showColumn" class="avuereport-class" ref="crud" v-model="colform">
                </avue-crud>
              </template>

            </avue-form>
          </el-dialog>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { getList, getUserld, getMethods, getStatus, getColList, giveUp,detail, getLabList, collectSample} from "@/api/psoa32/sample";
  import lcTree from "@/components/common/tree.vue";
  import overlay from "@/components/common/overlay.vue";
  import mixmin from '@/config/mixmin'
  import { columnreport,column} from "@/views/psoa32/analysis/sample/testdata"
  export default {
    components: {
      lcTree,
      overlay
    },
    data() {
      return {
        sampDiscardDialog:false,//弃样确认弹窗
        collectReportDialog: false,//收集报告弹窗
        colReportChange:false,//查看true  收集false
        permissionSample:{},
        form: {},
        reportQuery:{
          collectPerson:'',//收集人
          laboratory:'',//化验机构
        },
        collectPerson:[],
        laboratory:[],
        //样品列表
        query: {
          startTime: '',//开始日期
          endTime: '',//结束日期
          sampleStatus: '0',//状态
          samplingMethods:'0',//采样方式
          sampleNum:'',
          siteInfoId: '',
          size:'',
        },
        page:{},
        sampWayOption:[],//采样方式选项
        listStatusOption:[],//状态选项
        //收集样品列表
        collectSampList:'',
        loading: true,
        option: {
          addBtn: false,
          editBtn: false,
          delBtn: false,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          dialogClickModal: false,
          selection: true,
          menu: true,
          refreshBtn: true,
          columnBtn: true,
          column: column,
          dateBtn:false,
          menuWidth:160
        },
        data: [],
        reportOption: {
          emptyBtn:false,
          column: [{
            label: '收集人',
            prop: 'collectPerson',
            type: "select",
            order: 1,
            span: 12,
            multiple: false,
            dicUrl: "/api/squirrel-ficm/bladeUser/getUser",
            dicMethod:'get',
            props:{
              label:"name",
              value:"id"
            },
            dicQuery:{
              deptId:'',
              treeType:''
            },
            rules: [{
              required: true,
              message: "收集人不可为空",
              trigger: "blur"
            }],
          },{
            label: '化验机构',
            prop: 'laboratory',
            type: 'select',
            span: 12,
            order: 2,
            disabled:this.colReportChange,
            dicUrl:"/api/squirrel-ficm/deptinfo/getTestDeptList",
            props:{
              label:"deptName",
              value:"id"
            },
            multiple: false,
            rules: [{
              required: true,
              message: "化验机构不可为空",
              trigger: "blur"
            }]
          },{
            labelPosition:'top',
            prop: 'crud',
            formslot:true,
            span:24
          }]
        },

        //收集表单
        optionCol:{
          addBtn: false,
          editBtn: false,
          delBtn: false,
          tip: false,
          searchShow: false,
          searchMenuSpan: 6,
          border: true,
          index: false,
          dialogClickModal: false,
          selection: false,
          menu: false,
          refreshBtn: false,
          columnBtn: false,
          column: columnreport
        },
        reportData:[],
        colform:{},
        deptInfoId: '',
        treeType: null,
        allId:'',
        allchooseData:[]
      }
    },
    mixins: [mixmin],
    beforeMount(){
      //采样方式
      getMethods().then(res => {
        this.sampWayOption = res.data.data;
      })
      //状态
      getStatus().then(res => {
        this.listStatusOption = res.data.data
      })
      this.option.menu = this.vaildData(this.permission.psoa32_analysis_sample_handle, false)
    },
    methods: {
      ready(data, treeData) {
        this.treeType = data.nodeType
        this.nodeId = data.key
        this.deptInfoName = data.title
        this.deptInfoId = data.id
        this.page.currentPage = 1
        let rep = this.findObject(this.reportOption.column,"collectPerson")
        this.$set(rep.dicQuery, "deptId", this.deptInfoId)
        this.$set(rep.dicQuery, "treeType", this.treeType)
        this.onLoad()
      },
      //自定义搜索清空事件
      searchReset() {
        this.query = {
          startTime: '',//开始日期
          endTime: '',//结束日期
          sampleStatus: '0',//状态
          samplingMethods:'0',//采样方式
          sampleNum:'',
        };
        this.page.currentPage = 1
        this.onLoad();
      },
      searchBtn() {
        this.page.currentPage = 1
        this.onLoad()
      },

      //批量选中时获取id
      selectionChangeSampleList(item){
        this.allchooseData = item
        let idData = []
        idData = item.map(function (i) {
          return i.id
        })
        this.allId = idData.toString()
      },
      onLoad() {
        this.loading = true;
        // 样品列表
        let params = Object.assign({}, this.query, {
          current: this.page.currentPage,
          size: this.page.pageSize,
          siteInfoId: this.deptInfoId,
        })
        getList(params).then(res => {
          this.data = res.data.data.records
          this.page.total =res.data.data.total
          this.loading = false;
        })
      },


      collectOrCheck(isCollect, item){
        const colFormLab = this.findObject(this.reportOption.column,"laboratory")
        const colFormPer = this.findObject(this.reportOption.column,"collectPerson")
        //收集
        if(isCollect === 0){
            this.reportQuery.collectPerson = []
            this.reportQuery.laboratory = []
          let colsign = 1
          this.allchooseData.forEach(function (item) {
            if (item.sampleStatus === 2) {
              colsign = 2
            } else if (item.sampleStatus === 3) {
              colsign = 3
            }
          })
            if(colsign === 2){
              this.$message.warning("已收集样品不可被重复收集！")
            }else if(colsign === 3){
              this.$message.warning("已弃样样品不可被收集！")
            }else{
              this.loading = true
              this.$set(colFormLab, 'disabled', false)
              this.$set(colFormPer, 'disabled', false)
              this.reportOption.submitBtn = true
              this.allId = item
              this.collectReportDialog = true
              this.colReportChange = false

              // 收集样品列表
              getColList(item).then(res => {
                this.reportData = res.data.data
                this.loading = false;
              })
            }
          }else {
        //  查看
          let labname = []
          this.reportData = []
          this.collectReportDialog = true
          this.colReportChange = true
          this.$set(colFormLab, 'disabled', true)
          this.$set(colFormPer, 'disabled', true)
          this.reportOption.submitBtn=false
          detail(item.id).then(res=>{
            this.reportQuery.laboratory = res.data.data.testDeptInfoId
            this.reportQuery.collectPerson = res.data.data.collectionUserName
            labname.push(res.data.data)
          })
          this.reportData = labname
        }

      },

      //弃样
      discard(ids){
        let discolsign = 1
        this.allchooseData.forEach(function (item) {
          if (item.sampleStatus === 2) {
            discolsign = 2
          } else if (item.sampleStatus === 3) {
            discolsign = 3
          }
        })
        if(discolsign === 2){
          this.$message.warning("已收集样品不可被弃样！")
        }else if(discolsign === 3){
          this.$message.warning("已弃样样品不可被重复弃样！")
        }else {
          this.$confirm('确定弃样?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            giveUp(ids).then(() => {
              this.$message.success("操作成功")
            })
            this.onLoad()})
        }
      },
      //收集报告弹窗
      //确认
      colReportFun(){
        collectSample(this.allId, this.reportQuery.collectPerson , this.reportQuery.laboratory).then(()=>{
          this.$message.success("操作成功")
          this.collectReportDialog = false
          this.onLoad()
        })
      },
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    height: 100%;
    margin-bottom: 0;
  }

  .el-row {
    height: calc(100% - 20px);
  }

  .el-col {
    height: 100%;
    overflow: auto;
  }
</style>

<style lang="scss">
  .avuereport-class{
    margin-top: -30px;
    margin-bottom: -50px;
  }
  .select-class{
    width: 100%;
  }
  .el-form-class{
  }
</style>
